<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="https://p3-passport.byteimg.com/img/user-avatar/adbaecdee112a67f134a8d5f9ab90b0c~100x100.awebp" />
	<title>翻牌子</title>
    <style type="text/css">
        body {
            height: 100vh;
            background-color: whitesmoke;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: -30px 0 0;
            padding: 0 200px;
            user-select: none;
        }
        .button {
            background: linear-gradient(85deg,#636363,#3b3b3b);
            color: whitesmoke;
            width: 200px;
            height: 60px;
            font-size: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            left: calc(50% - 100px);
            bottom: 30px;
            border-radius: 16px;
            cursor: pointer;
            user-select: none;
        }
        .mini-card-grid {
            width: 100%;
            display: flex;
        }
        .mini-card {
            flex: 1;
            cursor: help;
            padding: 24px;
            height: 350px;
            /*阴影和渐变*/
            box-shadow: -2rem 20px 3rem -2rem #000;
            border-radius: 16px;
            background: linear-gradient(85deg,#434343,#262626);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .2s;
            position: relative;
            top: var(--mar);
            transform: rotate(var(--ro));
        }
        .card-ani {
            animation: card 1s linear;
        }
        strong {
            position: absolute;
            top: 24px;
            left: 24px;
            font-size: 36px;
        }
        .mini-card-title {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .5s;
            font-size: 72px;
            color: #bdbdbd;
        }
        h1 {
            cursor: pointer;
            transition: .1s;
        }
        h1:hover {
            transform: scale(1.5);
        }
        .mini-card:not(:first-child) {
            margin-left: -130px;
            box-shadow: -3rem 20px 3rem -2rem #000;
        }
        .mini-card:focus-within, .mini-card:hover {
            transform: translateY(-5rem) rotate(0deg);
        }
        .mini-card:hover .mini-card-title{
            color: whitesmoke;
        }
        .mini-card:hover~.mini-card {
            transform: translateX(130px) rotate(var(--ro));
        }
        @keyframes card {
            0% {
                transform: translateY(-5rem) rotate(0deg) scale(1);
            }
            2% {
                transform: translateY(-5rem) rotate(360deg) scale(0.8);
            }
            6% {
                transform: translateY(-5rem) rotate(720deg) scale(0.6);
            }
            12% {
                transform: translateY(-5rem) rotate(1080deg) scale(0.4);
            }
            20% {
                transform: translateY(-5rem) rotate(1440deg) scale(0.6);
            }
            30% {
                transform: translateY(-5rem) rotate(1800deg) scale(0.8);
            }
            42% {
                transform: translateY(-5rem) rotate(2160deg) scale(1);
            }
            65% {
                transform: translateY(-5rem) rotate(2520deg) scale(1.1);
            }
            100% {
                transform: translateY(-5rem) rotate(2880deg) scale(1.2);
            }
        }
    </style>
</head>
<body>
	<div class="mini-card-grid">
	</div>
	<div class="button">重 置</div>
    <script>
        let flag = false;
        let box = document.querySelector('.mini-card-grid');
        let button = document.querySelector('.button');
        let htmlStr = '',gifArr = ['phone','mac','pods','pad','money','gold','food'],topArr = [54,27,9,0,9,27,54];
        for(let i = 0;i < 7; i++){
            htmlStr+=`<article class="mini-card" style="--ro:${-12 + i*4}deg;--mar:${topArr[i]}px;">
                        <strong>
                            ${i+1}
                        </strong>
                        <div class="mini-card-title">
                            <h1>
                                ?
                            </h1>
                        </div>
                    </article>`
        }
        box.innerHTML = htmlStr;
        let cards = document.querySelectorAll('.mini-card');
        let hs = document.querySelectorAll('h1');
        hs.forEach((item,index)=>{
            item.onclick = ()=> {
                if(flag) return
                cards[index].style.zIndex = 99;
                flag = true;
                cards.forEach(c=>{
                    c.classList.remove('card-ani');
                })
                cards[index].classList.add('card-ani');
                cards[index].style.transform = 'translateY(-5rem) rotate(2880deg) scale(1.2)';
                setTimeout(()=>{
                    cards[index].classList.remove('card-ani');
                    item.innerHTML = gifArr[Math.floor(Math.random() * 7)];
                    item.style.color = 'rgb(255,85,68)';
                },1000)
            }
        })
        button.onmousedown = ()=>{
            button.style.bottom = '25px';
        }
        
        button.onmouseup = ()=>{
            button.style.bottom = '30px';
            location.reload();
        }
    </script>
</body>
</html>